<template>
	<div class="app">
        <myNavbar title="查询物流"></myNavbar>
		<list>
			<cell>
				<div class="details_box">
					<block v-for="(item,index) in axis" wx:for-index="index" wx:key="*this">
						<div class="details_item">
							<div class="details_item_left">
								<text :class="[index == 0?'details_item_icon':'details_item_no_icon']">&#xe62d;</text>
								<div class="details_item_line"></div>
							</div>
							<div class="details_item_right">
								<text class="details_item_date">{{item.time}}</text>
								<text :class="[index == 0?'details_item_content':'details_item_no_content']">{{item.context}}</text>
							</div>
						</div>
					</block>
				</div>
			</cell>
		</list>
	</div>
</template>

<script>
	import {
		delivery_query
	} from '../../../api/shipping'
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {
		data() {
			return {
				axis: [],
				trackimgno: ''
			}
		},
        components:{
		  myNavbar
        },
		created() {
			this.initIconFont()
			this.trackimgno = eeui.getPageInfo('logisticsList').params
			this.loadList(this.trackimgno)
		},
		methods: {
			loadList(data) {
				var _this = this
				delivery_query({
					trackingNo: data
				}).then(res => {
					if (res.type == 'success') {
						_this.axis = res.data.data
					}
				}).catch(error => {
					eeui.toast(error.content)
				})
			},
		}
	}
</script>

<style scoped>
	.app,
	body {
		background-color: rgba(248, 248, 248, 0.8);
	}

	.app {
		flex: 1;
	}

	.details_box {
		width: 700px;
		background-color: rgba(255, 255, 255, 1);
		border-radius: 16px;
		margin-left: 25px;
		padding: 25px;
		box-sizing: border-box;
		margin-top: 25px;
	}

	.details_item {
		display: flex;
		flex-direction: row;
		/* align-items: center; */
	}

	.details_item_left {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.details_item_icon {
		font-family: iconfont2;
		font-size: 40px;
		color: red;
	}

	.details_item_no_icon {
		font-family: iconfont2;
		font-size: 40px;
		color: #888888;
	}

	.details_item_line {
		width: 2px;
		height: 106px;
		background-color: rgba(232, 234, 237, 1);
	}

	.details_item_right {
		display: flex;
		flex-direction: column;
		width: 600px;
		margin-right: 30px;
	}

	.details_item_date {
		font-size: 20px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.5;
		display: block;
		height: 40px;
		line-height: 44px;
	}

	.details_item_content {
		font-size: 24px;
		font-weight: 400;
		color: rgba(235, 89, 79, 1);
		line-height: 36px;
		margin-top: 10px;
	}

	.details_item_no_content {
		font-size: 24px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		line-height: 36px;
		margin-top: 10px;
	}

	.navbar {
		width: 750px;
		height: 100px;
	}

	.text {
		font-size: 26px;
	}
</style>
